<template>


        <div class="super_container">

                <myheader :total_price="total" :count='count'></myheader>
            
                <!-- Home -->
            
                <!-- Boxes -->
                <div class="tlinks">Collect from <a href="http://www.cssmoban.com/" title="网站模板">网站模板</a></div>
                <div class="boxes">
                    <div class="section_container">
                        <div class="container">
                            <div class="row">
                                
                                <!-- Box -->
                                <div class="col-lg-4 box_col" v-for="c in catelist">
                                    <div class="box">
                                        <div class="box_image"><img src="../assets/images/box_1.jpg" alt=""></div>
                                        <div class="box_title trans_200"><router-link :to="listo(c.id)">{{ c.category }}</router-link></a></div>
                                    </div>
                                </div>
            
                            </div>
                        </div>
                    </div>
                </div>
            
                <!-- Categories -->
            
                <div class="categories">
                    <div class="section_container">
                        <div class="container">
                            <div class="row">
                                <div class="col text-center">
                                    <div class="categories_list_container">
                                        <ul class="categories_list d-flex flex-row align-items-center justify-content-start">
                                            <li><a href="categories.html">new arrivals</a></li>
                                            <li><a href="categories.html">recommended</a></li>
                                            <li><a href="categories.html">best sellers</a></li>
                                        </ul>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            
                <!-- Products -->
            
                <div class="products">
                    <div class="section_container">
                        <div class="container">
                            <div class="row">
                                <div class="col">
                                    <div class="products_container grid">
                                        
                                        <!-- Product -->
                                        <div class="product grid-item hot" v-for="g in goodslist">
                                            <div class="product_inner">
                                                <div class="product_image">
                                                    <img :src="getImgurl(g.img)" alt="">
                                                    
                                                </div>
                                                <div class="product_content text-center">
                                                    <div class="product_title" style="color:black;"><router-link :to="list(g.id)">{{ g.goodname }}</router-link></div>
                                                    <div class="product_price" style="color:black;"><b>${{ g.price }}</b></div>
                                                    <div class="product_button ml-auto mr-auto trans_200" @click="add_cart(g)"><a>添加到购物车</a></div>
                                                </div>
                                            </div>	
                                        </div>
                                    
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            
                <!-- Footer -->
                <page v-if="changestatus" :dataAll="all" :dataCur="cur" :datanum="num" :dataDatanum="dataNum" @change="pageChange"></page>
                <myfooter></myfooter>


            
            
            </div>

      
</template>
      
      
       
      <script>


        import myheader from './header.vue'
        import myfooter from './footer.vue'
        import Cookies from 'js-cookie'
        import page from './page.vue'

      export default {
        data () {
          return {
            msg: "这是一个变量",
            datalist:[],
            name: '123',
            goodslist:[],
            catelist:[],
            total:0,
            count:0,

            clicked:0,
            upath: '',
            result: '',
            uping:0,

            all: 0, //总页数
            cur: 1, //当前页码
            num: 3, //一页显示的数量 必须是奇数
            dataNum: 0, //数据的数量
            changestatus:false

            }
            },
        components: {
        'myheader':myheader,
        'myfooter':myfooter,
        'page':page,
        },
        mounted:function(){
            
            this.common.get_menu();
            
            let username = this.$route.query.username
            if (username){
                Cookies.set('username', username,{ expires: 7 })
            }
            
            var uname = Cookies.get('username')
            if (uname){
                var url = this.base_url + '/webindex'
                var _this = this
                this.axios.get(url)
                .then(function(result) {
                _this.catelist = result.data.catelist;
                _this.goodslist = result.data.goodslist;
                console.log(_this.goodslist)
            });
                var data = Cookies.get('cart');
                if(data){
                    data = JSON.parse(data)
                    this.datalist = data;
                };
                this.total_price()
            }else{
                this.$router.push('/login')
            }
        },
        methods:{
            changetest(index){
                this.clicked = index;
            },
            list:function(id){
                var list_url = '/product?id='
                var url = list_url+id;
                return url;
            },
            listo:function(id){
                var list_url = '/cate?id='
                var url = list_url+id;
                return url;
            },
            getImgurl:function(image){
                let image_url = this.base_url+'/static/upload/'
                let url = image_url+image
                return url
            },
            //添加购物车逻辑
            add_cart:function(good_info){
            let cartlist = this.datalist;
            let findgood = 0;
            for(let i=0,l=cartlist.length;i<l;i++){
                if(good_info.goodname == cartlist[i]['name']){
                    cartlist[i]['num']++;
                    findgood = 1;
                    break;
                    }
            }
            if(findgood==0){
                cartlist.push({'id':good_info.id,'name':good_info.goodname,'price':good_info.price,'image':good_info.img,'num':1});
            }
			this.datalist = cartlist;
            Cookies.set('cart',this.datalist,{ expires: 7 })
            this.total_price()
            this.post_redis()
            console.log('添加购物车成功')
            },
            // 总价
            total_price:function(){
				let cartlist = this.datalist;
				this.total = 0
				this.count = 0
            	for(let i=0,l=cartlist.length;i<l;i++){
				this.total = this.total + (cartlist[i].price * cartlist[i].num);
				this.count = this.count + cartlist[i].num
				}
            },
            // 存入redis
            post_redis:function(){
				let url =  this.base_url + '/add_cart_redis'
                var _this = this
                var token = localStorage.getItem('token')
				var username = Cookies.get('username')
				var params = {
                    'cartlist':JSON.stringify(this.datalist),
                    'token':token,
					'username':username,
				}
                this.axios.post(url,this.qs.stringify(params))
                .then(function(result) {
				if(result.data['code'] == '200') {
					console.log(result.data.message)
				}
				else {
					_this.msg = result.data.message
					console.log(result.data)
				}
                }); 
            }
        }

      }
      
      
      </script>
       
      <style>
      
      
      
      </style>